<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <h4 class="card-label-title">分销层级设置</h4>
      <template>
        <a-row :gutter="[16, 30]" type="flex" align="middle">
          <a-col class="required" :span="3" style="text-align: right"> 分销层级设置： </a-col>
          <a-col :span="16">
            <a-radio-group v-model="basic.level">
              <!-- <a-radio :value="0"> 关闭 </a-radio> -->
              <a-radio :value="1"> 一级分销 </a-radio>
              <a-radio :value="2"> 二级分销 </a-radio>
              <a-radio :value="3"> 三级分销 </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row style="align-items: flex-start" :gutter="[16, 30]" type="flex" align="middle">
          <a-col class="required" :span="3" style="text-align: right"> 自购返利： </a-col>
          <a-col :span="16">
            <a-radio-group v-model="basic.is_rebate">
              <a-radio :value="0"> 关闭 </a-radio>
              <a-radio :value="1"> 开启 </a-radio>
            </a-radio-group>
            <p style="margin-top: 8px">
              <span style="font-size: 8px; color: rgba(0, 0, 0, 0.45)"
                >开启后分销商自己购买商品享受一级佣金，上级享受二级佣金，上上级享受三级佣金</span
              >
            </p>
          </a-col>
        </a-row>
        <a-divider />
        <h4 class="card-label-title">上下线关系设置</h4>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 下级条件： </a-col>
          <a-col :span="16">
            <a-radio-group v-model="basic.condition">
              <a-radio :value="0"> 首次点击 </a-radio>
              <a-radio :value="1"> 首次下单 </a-radio>
              <a-radio :value="2"> 首次付款 </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="3" style="text-align: right"> 是否强制绑定上级： </a-col>
          <a-col :span="16">
            <a-radio-group v-model="basic.enforce_bind_parent">
              <a-radio :value="0"> 否 </a-radio>
              <a-radio :value="1"> 是 </a-radio>
            </a-radio-group>
            <p style="margin-top: 8px">
              <span
                style="font-size: 8px; color: rgba(0, 0, 0, 0.45)"
              >开启后，新用户必须绑定上级才可以注册用户</span
              >
            </p>
          </a-col>
        </a-row>
        <a-divider />
        <h4 class="card-label-title">分销资格设置</h4>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 分销商条件： </a-col>
          <a-col :span="16">
            <a-radio-group v-model="basic.share_condition">
              <a-radio :value="0"> 无条件（需要审核） </a-radio>
              <a-radio :value="1"> 申请（需要审核） </a-radio>
              <a-radio :value="2"> 无需审核 </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>

        <div class="tip" v-if="basic.share_condition !== 0">以下两个条件满足一个即可升级</div>
        <a-row :gutter="[16, 30]" type="flex" align="top" v-if="basic.share_condition !== 0">
          <a-col class="required" :span="3" style="text-align: right"> 消费成为分销商： </a-col>
          <a-col :span="16">
            <a-input
              class="input-class"
              style="width: 468px; margin-bottom: 8px"
              addonAfter="元"
              default-value="0.00"
              type="number"
              v-model="basic.auto_share_val"
            />
            <p style="margin-bottom: 0">
              <span
                style="font-size: 14px; font-family: PingFangSC-Regular; line-height: 22px; color: rgba(0, 0, 0, 0.45)"
                >消费满指定金额(付款即生效,无需过售后)自动成为分销商，0元表示不自动</span
              >
            </p>
          </a-col>
        </a-row>
        <a-row
          style="align-items: flex-start"
          :gutter="[16, 30]"
          type="flex"
          align="middle"
          v-if="basic.share_condition !== 0"
        >
          <a-col class="required" :span="3" style="text-align: right"> 或者购买成分销商： </a-col>
          <a-col :span="16">
            <a-radio-group v-model="basic.share_goods_status" @change="onRadioChange">
              <a-radio :value="0"> 关闭 </a-radio>
              <a-radio :value="1"> 任意商品 </a-radio>
              <a-radio :value="2"> 指定商品 </a-radio>
            </a-radio-group>
            <a-button type="primary" @click="visible = true"> 添加商品 </a-button>
            <!-- <a-input v-model="basic.share_goods_id" disabled style="margin-top:10px;width:200px;display:block;"></a-input> -->
            <a-table
              style="margin-top: 10px"
              :row-key="(record) => record.id"
              :pagination="false"
              :columns="goodsTableColumns"
              :data-source="goodsDataSource"
            >
              <template slot="goods_name" slot-scope="text, goods">
                <div style="display: flex; align-items: center">
                  <img style="width: 48px; height: 48px" :src="goods.cover_pic" alt="" />
                  <span
                    style="
                      max-width: 180px;
                      font-size: 14px;
                      font-family: PingFangSC-Medium;
                      line-height: 22px;
                      color: rgba(0, 0, 0, 0.65);
                      margin-left: 24px;
                      overflow: hidden;
                      display: inline-block;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    >{{ goods.name }}</span
                  >
                </div>
              </template>
              <template slot="product_type" slot-scope="text, goods">
                <span>{{ ['普通商品', '酒店预约', '服务预约'][goods.product_type] }}</span>
              </template>
              <template slot="price" slot-scope="text, goods">
                <span>¥{{ goods.price }}</span>
              </template>
            </a-table>
          </a-col>
        </a-row>

        <!-- <a-row :gutter="[16, 30]" type="flex" align="middle" v-model="input_goods">
          
          <a-col class="required" :span="3" style="text-align: right"> 选择商品： </a-col> -->
        <!-- <a-input-search
            @search="visible = true"
            placeholder="搜索商品"
            :readOnly="true"
            v-model="basic.share_goods_id"
            style="width: 300px"
          >
            <a-button slot="enterButton">选择商品</a-button>
          </a-input-search> -->
        <!-- </a-row> -->
        <a-divider />
        <h4 class="card-label-title">提现设置</h4>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 提现方式： </a-col>
          <a-col :span="16">
            <a-checkbox :checked="wechat_checked" @change="onCashChange(0, $event)"> 微信支付 </a-checkbox>
            <a-checkbox :checked="alipay_checked" @change="onCashChange(1, $event)"> 支付宝支付 </a-checkbox>
            <a-checkbox :checked="bank_checked" @change="onCashChange(2, $event)"> 银行卡支付 </a-checkbox>
            <a-checkbox :checked="remaining_checked" @change="onCashChange(3, $event)"> 余额支付 </a-checkbox>
            <!-- <a-checkbox-group :options="options" @change="onCashChange" v-model="basic.pay_type"/> -->
            <p style="margin: 8px 0 0 0">
              <span
                style="font-size: 14px; font-family: PingFangSC-Regular; line-height: 22px; color: rgba(0, 0, 0, 0.45)"
                >微信自动支付，需要申请微信支付的企业付款到零钱功能</span
              >
            </p>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 最少提现： </a-col>
          <a-input
            class="input-class"
            style="width: 468px"
            addonAfter="元"
            default-value="0"
            type="number"
            v-model="basic.min_money"
          />
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 每日上限： </a-col>
          <a-col :span="16" style="padding: 0">
            <a-input
              class="input-class"
              style="width: 468px; margin-bottom: 2px"
              addonAfter="元"
              default-value="0"
              type="number"
              v-model="basic.cash_max_day"
            />
            <p style="margin-top: 8px">
              <span
                style="font-size: 14px; font-family: PingFangSC-Regular; line-height: 22px; color: rgba(0, 0, 0, 0.45)"
                >0元表示不限制每日提现金额</span
              >
            </p>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="3" style="text-align: right"> 提现手续费： </a-col>
          <a-col :span="16" style="padding: 0">
            <a-input
              class="input-class"
              addonAfter="%"
              style="width: 468px; margin-bottom: 2px"
              default-value="0.00"
              type="number"
              v-model="basic.cash_service_charge"
            />
            <p style="margin-top: 8px; margin-bottom: 0px">
              <span
                style="font-size: 14px; font-family: PingFangSC-Regular; line-height: 22px; color: rgba(0, 0, 0, 0.45)"
                >0表示不设置提现手续费</span
              >
            </p>
            <p style="margin-bottom: 0px">
              <span
                style="font-size: 14px; font-family: PingFangSC-Regular; line-height: 22px; color: rgba(0, 0, 0, 0.45)"
                >提现手续费额外从提现中扣除</span
              >
            </p>
            <p style="">
              <span
                style="font-size: 14px; font-family: PingFangSC-Regular; line-height: 22px; color: rgba(0, 0, 0, 0.45)"
                >例如：10%的提现手续费：提现100元，扣除手续费10元， 实际到手90元</span
              >
            </p>
          </a-col>
        </a-row>

        <a-divider />

        <h4 class="card-label-title">积分赠送</h4>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 推荐送积分： </a-col>
          <a-input
            class="input-class"
            addonAfter="积分"
            style="width: 468px"
            default-value="0"
            type="number"
            v-model="basic.rec_member_integral"
          />
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col class="required" :span="3" style="text-align: right"> 被推荐送积分： </a-col>
          <a-input
            class="input-class"
            addonAfter="积分"
            style="width: 468px"
            default-value="0"
            type="number"
            v-model="basic.d_rec_member_integral"
          />
        </a-row>
        <a-divider />
        <h4 class="card-label-title">分销协议</h4>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="3" style="text-align: right"> 用户须知： </a-col>
          <a-col :span="16">
            <a-textarea style="width: 468px; height: 100px" v-model="basic.content" />
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="3" style="text-align: right"> 申请协议： </a-col>
          <a-col :span="16">
            <a-textarea style="width: 468px; height: 100px" v-model="basic.agree" />
          </a-col>
        </a-row>
        <a-divider />

        <h4 class="card-label-title">背景图片</h4>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="3" style="text-align: right"> 申请页面： </a-col>
          <a-col :span="11">
            <!-- 上传图片 -->
            <cyyUploadImg
              @uploadSuccess="onApplyOk"
              @deleteImg="basic.apply_image = ''"
              :imgSrc="basic.apply_image"
            ></cyyUploadImg>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="3" style="text-align: right"> 待审核页面： </a-col>
          <a-col :span="11">
            <!-- 上传图片 -->
            <cyyUploadImg
              @uploadSuccess="onWaitOk"
              @deleteImg="basic.no_checked_image = ''"
              :imgSrc="basic.no_checked_image"
            ></cyyUploadImg>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :gutter="[30, 30]" style="margin: 6px 0" type="flex" align="middle" justify="center">
          <a-button type="primary" @click="onSave"> 保存 </a-button>
          <a-button
            style="margin-left: 8px"
            @click="
              () => {
                this.$router.go(-1)
              }
            "
          >
            取消
          </a-button>
        </a-row>
      </template>
      <select-goods :countNum="1" v-model="visible" @onOk="selectGoodsOk"></select-goods>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import SelectGoods from '@/components/SearchGoods/index'
import { cyyUploadImg, cyyInput, cyyTextArea } from '@/components/CyyUi/index'
import { setBasicSetting, getShareSetting } from '@/api/share'
const options = [
  { label: '微信支付', value: 1 },
  { label: '支付宝支付', value: 0 },
  { label: '银行卡支付', value: 2 },
  { label: '余额支付', value: 3 },
]

const goodsTableColumns = [
  {
    title: '商品ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'goods_name' },
  },
  {
    title: '产品类型',
    dataIndex: 'product_type',
    key: 'product_type',
    scopedSlots: { customRender: 'product_type' },
  },
  {
    title: '售价',
    dataIndex: 'price',
    key: 'price',
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '库存',
    dataIndex: 'goods_num',
    key: 'goods_num',
  },
]
export default {
  name: 'ShareBasicSetting',
  components: {
    SelectGoods,
    cyyUploadImg,
    cyyInput,
    cyyTextArea,
  },
  data() {
    return {
      image_status: false,
      input_goods: false,
      wechat_checked: false,
      alipay_checked: false,
      bank_checked: false,
      remaining_checked: false,
      basic: {
        agree: null,
        auto_share_val: 0,
        cash_max_day: 0,
        cash_service_charge: 0,
        condition: 0,
        enforce_bind_parent: 0,
        content: null,
        d_rec_member_integral: 0,
        is_rebate: 1,
        level: 3,
        min_money: 0,
        pay_wechat: 0,
        pay_alipay: 0,
        bank: 0,
        rec_member_integral: 0,
        remaining_sum: 0,
        share_condition: 0,
        share_goods_id: null,
        share_goods_status: 0,
        apply_image: '',
        no_checked_image: '',
      },
      options,
      test: [],
      visible: false,
      goodsTableColumns,
      goodsDataSource: [],

      testVal: '哈哈哈哈哈哈',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    changeTab(val) {
      if (val == 1) {
        this.$router.push({ name: 'ShareUserList' })
      } else if (val == 3) {
        this.$router.push({ name: 'ShareMoneySetting' })
      }
    },
    selectGoodsOk(data) {
      this.goodsDataSource = [data[0]]
      this.basic.share_goods_id = parseInt(data[0].id)
      this.visible = false
    },
    onSave() {
      if (
        this.basic.pay_wechat === 0 &&
        this.basic.pay_alipay === 0 &&
        this.basic.bank === 0 &&
        this.basic.remaining_sum === 0
      ) {
        this.$error({
          content: '必须选择至少一种提现方式',
        })
        return
      }
      const hide = this.$message.loading('提交中', 0)
      if (this.basic.pay_wechat === 1 && this.basic.pay_alipay === 0) {
        this.basic.pay_type = 0
      }
      if (this.basic.pay_wechat === 0 && this.basic.pay_alipay === 1) {
        this.basic.pay_type = 1
      }
      if (this.basic.pay_wechat === 1 && this.basic.pay_alipay === 1) {
        this.basic.pay_type = 2
      }
      if (this.basic.pay_wechat === 0 && this.basic.pay_alipay === 0) {
        this.basic.pay_type = 3
      }
      console.log(this.basic)
      setBasicSetting(this.basic).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    setQrcode() {},
    onCashChange(type, e) {
      console.log(e)
      if (type === 0) {
        if (e.target.checked === true) {
          this.wechat_checked = true
          this.basic.pay_wechat = 1
        } else {
          this.wechat_checked = false
          this.basic.pay_wechat = 0
        }
      }
      if (type === 1) {
        if (e.target.checked === true) {
          this.alipay_checked = true
          this.basic.pay_alipay = 1
        } else {
          this.alipay_checked = false
          this.basic.pay_alipay = 0
        }
      }
      if (type === 2) {
        if (e.target.checked === true) {
          this.bank_checked = true
          this.basic.bank = 1
        } else {
          this.bank_checked = false
          this.basic.bank = 0
        }
      }
      if (type === 3) {
        if (e.target.checked === true) {
          this.remaining_checked = true
          this.basic.remaining_sum = 1
        } else {
          this.remaining_checked = false
          this.basic.remaining_sum = 0
        }
      }
    },
    onRadioChange(e) {
      // console.log(e)
      if (e.target.value === 2) {
        this.input_goods = true
      }
    },
    getData: function () {
      var params = { name: 'share_basic_setting' }
      var that = this
      getShareSetting(params).then((res) => {
        const data = res.data
        if (data) {
          that.basic.agree = data.agree.value
          that.basic.auto_share_val = data.auto_share_val.value
          that.basic.cash_max_day = data.cash_max_day.value
          that.basic.cash_service_charge = data.cash_service_charge.value
          that.basic.condition = data.condition.value
          that.basic.enforce_bind_parent = data.enforce_bind_parent.value
          that.basic.content = data.content.value
          that.basic.d_rec_member_integral = data.d_rec_member_integral.value
          that.basic.is_rebate = data.is_rebate.value
          that.basic.level = data.level.value
          that.basic.pay_type = data.pay_type.value
          that.basic.min_money = data.min_money.value
          that.basic.rec_member_integral = data.rec_member_integral.value
          that.basic.remaining_sum = data.remaining_sum.value
          that.basic.bank = data.bank.value
          that.basic.share_condition = data.share_condition.value
          that.basic.share_goods_id = data.share_goods_id.value
          that.basic.share_goods_status = data.share_goods_status.value
          that.basic.apply_image = data.apply_image.value
          that.basic.no_checked_image = data.no_checked_image.value
          if (that.basic.pay_type === 2 || that.basic.pay_type === 0) {
            that.wechat_checked = true
            that.basic.pay_wechat = 1
          }
          if (that.basic.pay_type === 2 || that.basic.pay_type === 1) {
            that.alipay_checked = true
            that.basic.pay_alipay = 1
          }
          if (that.basic.bank === 1) {
            that.bank_checked = true
          }
          if (that.basic.remaining_sum === 1) {
            that.remaining_checked = true
          }
          that.$nextTick(() => {
            that.image_status = true
          })
        }
        if (res.goods) {
          that.goodsDataSource = [res.goods]
        }
        console.log(that.basic)
      })
    },
    onApplyOk(val) {
      this.basic.apply_image = val.data
    },
    onWaitOk(val) {
      this.basic.no_checked_image = val.data
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-divider-inner-text {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.required::before {
  content: '*';
  color: red;
}
.input-class {
  width: 300px;
  margin: 10px 8px 25px 0;
}
.card-label-title {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
}

.tip {
  padding: 20px 0 20px 20px;
  color: #ff0000;
}
</style>
